<template>
    <div class="home">
        <el-carousel
                :interval="4000"
                type="card"
                height="550px">
            <el-carousel-item v-for="(drug,index) in hotDrugs" :key="index">
                <div class="content">
                    <h1>{{drug.name}}</h1>
                </div>
                <img :src="drug.url" width="100%" height="100%">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        props: {
            hotDrugs: {
                type: Array
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .home {
        margin-top 20px

        .el-carousel {
            box-shadow 0 10px 30px darkgray
            .el-carousel__item {
                box-shadow 0 0 100px darkgray
                border-radius 10px

                img {
                    width 100%
                    height 100%
                }

                .content {
                    position absolute
                    left 0
                    right 0

                    h1 {
                        text-align center
                    }
                }
            }
        }
    }
</style>
